<template>
    <div class="base-app">
        <router-view v-slot="{ Component, route }" class="router-view">
            <keep-alive :include="keepAliveRouteNameList">
                <component :is="Component" :key="route.fullPath" />
            </keep-alive>
        </router-view>
    </div>
    <BackHome v-if="showBackHome" />
</template>

<script lang="ts" setup>
import { store } from '@/store';
import { computed } from 'vue';
import BackHome from './home/components/BackHome.vue';
import { useRoute } from 'vue-router';

// keep-alive的include，判断的是页面组件的name，出于方面获取与判断的考虑，取的是route的name用于判断，所以需要将组件的name与route的name保持一致
const keepAliveRouteNameList = computed(() => {
    return store.state.app.keepAliveRouteNameList;
});
const route = useRoute();
const showBackHome = computed(() => store.state.app.showBackHomeBtn && !(route.path === '/home'));

</script>

<style lang="scss" scoped>
.base-app {
    padding: 0;
    height: 100vh;
}

.van-safe-area-top,
.van-safe-area-bottom {
    background: #fff;
}
</style>
